<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>购物车添加动画实现</title>
  <style>
    *,
    *::after,
    *::before {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    :root {
      min-height: 100vh;
    }

    :root:focus-within {
      scroll-behavior: smooth;
    }

    body {
      min-height: inherit;
    }

    @keyframes moveX {
      to {
        transform: translateX(var(--x));
      }
    }

    @keyframes moveY {
      to {
        transform: translateY(var(--y));
      }
    }

    .plus {
      position: fixed;
      top: var(--top);
      left: var(--left);
      width: 30px;
      height: 30px;
      border-radius: 50%;
      cursor: pointer;
      animation: moveY .8s cubic-bezier(0.5, -0.5, 1, 1);
    }

    .plus-icon {
      width: 100%;
      height: 100%;
      background-color: #5151e7;
      border-radius: 50%;
      animation: moveX .8s linear;
    }

    .plus-icon::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 3px;
      width: 4px;
      height: 24px;
      margin-left: -2px;
      background-color: white;
      border-radius: 8px;
    }

    .plus-icon::after {
      content: "";
      position: absolute;
      left: 3px;
      top: 50%;
      width: 24px;
      height: 4px;
      margin-top: -2px;
      background-color: white;
      border-radius: 8px;
    }

    .car {
      width: 60px;
      height: 60px;
      display: flex;
      justify-content: center;
      align-items: center;
      position: fixed;
      right: 240px;
      bottom: 100px;
      color: white;
      border-radius: 50%;
      background-color: #5151e7;
    }

    button {
      border: 0;
      background-color: #5151e7;
      border-radius: 10px;
      position: fixed;
      top: 100px;
      right: 20px;
      color: white;
      padding: 10px;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <button>加入购物车</button>
  <div class="car">购</div>
</body>
<script>
  "use strict"; {
    const btn = document.querySelector('button');
    const car = document.querySelector('.car');
    const PLUS_SIZE = 30;
    btn.onclick = () => {
      const box = document.createElement('div');
      box.className = 'plus';
      box.innerHTML = `<div class="plus-icon"></div>`;

      const btnRect = btn.getBoundingClientRect();
      const left = btnRect.left + (btnRect.width / 2) - (PLUS_SIZE / 2);
      const top = btnRect.top - PLUS_SIZE;

      const carRect = car.getBoundingClientRect();
      const x = carRect.left + (carRect.width / 2) - (PLUS_SIZE / 2) - left;
      const y = carRect.top - PLUS_SIZE - top;

      box.style.setProperty('--left', `${left}px`);
      box.style.setProperty('--top', `${top}px`);
      box.style.setProperty('--x', `${x}px`);
      box.style.setProperty('--y', `${y}px`);

      box.addEventListener('animationend', () => {
        box.remove();
      })
      document.body.appendChild(box);
    }
  };
</script>

</html>